<template>
  <view class="card-container b-rd-40">
    <view class="title-container">
      <view class="title">
        <up-icon
          size="32"
          name="http://www.adnaan.cn/chinese-images/icon/tag.png"></up-icon>
        <text>{{ title }}</text>
      </view>
      <view class="more" @click="more">
        <text class="more-text" v-if="showMore">更多</text>
      </view>
    </view>
    <slot name="content"></slot>
  </view>
</template>

<script setup>
const { title } = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  showMore: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["more"]);
const more = () => {
  emit("more");
};
</script>

<style lang="scss" scoped>
.card-container {
  width: 100%;
  height: 100%;
  padding: 30rpx 20rpx;
  box-sizing: border-box;
  background-color: #fff;
  .title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .title {
      font-size: 36rpx;
      color: $color-primary-light;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
    .more {
      .more-text {
        color: $color-primary-dark;
      }
    }
  }
}
</style>
